<!-- 左边菜单和顶部登录后的小弹窗 -->
<template>

	<view :class="gcc">
		<view class="mtbox-mgbtit">
			{{$t("lllb.tit1")}}
			<image src="/static/xx.png" class="mtbox-mgbtit-clpic" @click="clm"></image>
		</view>
		<view class="mtbox-mgbinfo">

			<view class="mtbox-mgbinfo-item bj_between">
				<view class="bj_left">
					<image src="/static/top/i1.png" class="mtbox-mgbinfo-item-ico"></image>
					<view class="">
						{{$t("lllb.item1")}}
					</view>
					<image src="/static/page5/v1.png" class="mtbox-mgbinfo-item-dj"></image>
				</view>
				<view class="mtbox-mgbinfo-item-btn1" @click="opp(6)">
					{{$t("lllb.btn1")}}
				</view>
			</view>
			<view class="mtbox-mgbinfo-item bj_between">
				<view class="bj_left">
					<image src="/static/top/i2.png" class="mtbox-mgbinfo-item-ico"></image>
					<view class="">
						<view>{{$t("lllb.item2")}}</view>
						<view class="f20 c9c">
							<text>{{$t("lllb.si1")}}</text>
							<text>{{$t("menu.$")}} 0,00</text>
						</view>
					</view>
				</view>
				<view class="mtbox-mgbinfo-item-btn2" @click="opp(0)">
					{{$t("lllb.btn1")}}
				</view>
			</view>
			<view class="mtbox-mgbinfo-item bj_between">
				<view class="bj_left">
					<image src="/static/top/i3.png" class="mtbox-mgbinfo-item-ico"></image>
					<view class="">
						{{$t("lllb.item3")}}
					</view>
				</view>
				<view class="mtbox-mgbinfo-item-btn3">
					{{$t("lllb.btn2")}}
				</view>
			</view>
			<view class="mtbox-mgbinfo-item bj_between">
				<view class="bj_left">
					<image src="/static/top/i4.png" class="mtbox-mgbinfo-item-ico"></image>
					<view class="">
						{{$t("lllb.item4")}}
					</view>
				</view>
				<view class="mtbox-mgbinfo-item-btn3">
					{{$t("lllb.btn2")}}
				</view>
			</view>
			<view class="mtbox-mgbinfo-item bj_between">
				<view class="bj_left">
					<image src="/static/top/i5.png" class="mtbox-mgbinfo-item-ico"></image>
					<view class="">
						<view>{{$t("lllb.item5")}}</view>
						<view class="f20 c9c">
							{{$t("lllb.si2")}}
						</view>
					</view>
				</view>
				<view class="mtbox-mgbinfo-item-btn3">
					{{$t("lllb.btn2")}}
				</view>
			</view>
			<view class="mtbox-mgbinfo-item bj_between">
				<view class="bj_left">
					<image src="/static/top/i6.png" class="mtbox-mgbinfo-item-ico"></image>
					<view class="">
						<view>{{$t("lllb.item6")}}</view>
						<view class="f20 c9c">
							{{$t("lllb.si3")}}
						</view>
					</view>
				</view>
				<view class="mtbox-mgbinfo-item-btn3">
					{{$t("lllb.btn2")}}
				</view>
			</view>

			<view class="tc f30 mb20" @click="opp(0)">
				{{$t("lllb.btn3")}}
			</view>

			<view class="mtbox-bb bj_between">
				<view class="">
					<view class="f28 mb20">
						{{$t("lllb.tit2")}}
					</view>
					<view class="mtbox-bb-jdt mb20">
						<view class="mtbox-bb-jdt-mt" style="width: 10%;"></view>
					</view>
					<view class="f26">
						<text class="cy">
							{{$t("menu.$")}} 0,00
						</text>
						<text>/ {{$t("menu.$")}} 10,00</text>
					</view>
				</view>
				<view class="bj_sx">
					<image src="/static/page5/v1.png" class="mtbox-bb-dj mb10"></image>
					<view class="mtbox-bb-btn bj_center">
						<view>
							<view class="bj_center">
								<image src="/static/top/9.png" class="mtbox-bb-si"></image>
								<text>{{$t("lllb.btn1")}}</text>
							</view>
							<view class="tc">
								{{$t("menu.$")}}
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	const clmgc = inject("clmgc");
	const opp = inject("opp");
	const clgc = inject("clgc");
	let gcc = ref("dh_1")

	function clm() {
		gcc.value = "dh_2"
		try {
			clmgc();
		} catch (error) {
			//TODO handle the exception
		}
		try {
			clgc()
		} catch (error) {
			//TODO handle the exception
		}
	}
</script>

<style scoped lang="scss">
	.mtbox {
		&-bb {
			background: #004316;
			border-radius: 12rpx;
			padding: 18rpx 16rpx;

			&-dj {
				width: 60rpx;
				height: 60rpx;
			}

			&-si {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}

			&-btn {
				width: 212rpx;
				height: 76rpx;
				background: #433713;
				border-radius: 16rpx;
				color: #000000;
				font-size: 26rpx;
			}

			&-jdt {
				width: 372rpx;
				height: 16rpx;
				background: #000000;
				border-radius: 100rpx;
				position: relative;

				&-mt {
					position: absolute;
					left: 0;
					top: 0;
					height: 16rpx;
					background: #FFBE32;
					border-radius: 100rpx;
				}
			}
		}

		&-mgbtit {
			width: 698rpx;
			height: 112rpx;
			line-height: 112rpx;
			background: linear-gradient( 180deg, #00802B 0%, #06C045 100%);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			position: relative;
			font-weight: bold;
			font-size: 36rpx;
			text-align: center;

			&-clpic {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 32rpx;
				top: 40rpx;
			}
		}

		&-mgbinfo {
			padding: 40rpx 28rpx;
			width: 698rpx;
			background: linear-gradient( 180deg, #007628 0%, #177747 100%);
			border-radius: 0 0 20rpx 20rpx;

			&-item {
				height: 112rpx;
				background: #004316;
				border-radius: 12rpx;
				padding: 0 14rpx;
				margin-bottom: 20rpx;

				&-ico {
					width: 80rpx;
					height: 80rpx;
					margin-right: 10rpx;
					font-size: 28rpx;
				}

				&-dj {
					width: 80rpx;
					height: 80rpx;
				}

				&-btn1 {
					width: 208rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					font-size: 30rpx;
					background: #FFBE32;
					border-radius: 100rpx;
				}

				&-btn2 {
					width: 208rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					font-size: 30rpx;
					background: #2AA22E;
					border-radius: 100rpx;
				}

				&-btn3 {
					width: 208rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					font-size: 30rpx;
				}
			}
		}
	}
</style>